<template>
    <div>
          <el-row>
            <el-col :span="4"></el-col>
            <el-col :span="4"><el-input v-model="cql" placeholder="请输入过滤语句"></el-input></el-col>
            <el-col :span="2"><el-button type="primary" @click="excuteFilter">过滤器</el-button></el-col>
            <el-col :span="2"><el-button type="primary" @click="removeFilter">去除过滤</el-button></el-col>
            <el-col :span="4"></el-col>
          </el-row>
        <div id="map" class="map" ref="olfilter"> </div>
    </div>
</template>

<script>
import { Map, View } from "ol";
import OSM from "ol/source/OSM";
import {fromLonLat} from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

export default{
    
    data(){
        return{
            map:null,
            homicides:{},
            block: {},
            source:{},
            cql: ""
        };
    },
    mounted(){
       const world = new TileLayer({
                source: new OSM(),
            });
        const geo = new TileLayer({
                source: new TileWMS({
                    url:'http://localhost:8081/geoserver/nyc/wms',
                    params:{
                        "LAYERS": 'nyc:nyc_buildings'
                    },
                    serverType: 'geoserver'
                })
            });
            this.source = new TileWMS({
                // url: 'http://localhost:8081/geoserver/nyc/wms',
                url: 'http://localhost:8081/geoserver/zq/wms',
                params:{
                    "LAYERS": 'zq:geo_zq'
                    // "LAYERS": '	nyc:blocks'
                },
                serverType: 'geoserver'
            })
            
        this.block = new TileLayer({
            source: this.source
        })
        this.homicides = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": 'nyc:homicides'
                },
                serverType: 'geoserver'
            })
        })
        const subway_stations = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": 'nyc:subway_stations'
                },
                serverType: 'geoserver'
            })
        })
        const streets = new TileLayer({
            source: new TileWMS({
                url: 'http://localhost:8081/geoserver/nyc/wms',
                params:{
                    "LAYERS": 'nyc:streets'
                },
                serverType: 'geoserver'
            })
        })
        //const layers = [ world,this.block,geo,this.homicides,streets,subway_stations]
        const layers = [world,this.block]
         var map = new Map({
            target: 'map',
            layers: layers,
            view: new View({
            center: fromLonLat([0, 0]),
            zoom: 2,
            })
        });
        this.map = map;
    },
    methods:{
        excuteFilter(){
            if(this.cql==""){
                this.source.updateParams({CQL_FILTER:"TOUCHES(geom,MULTIPOLYGON (((570783.0961163802 4488120.178624606, 570710.8448263658 4488079.31043795, 570662.9512928218 4488146.925165841, 570617.1691165362 4488212.519410919, 570677.0926358752 4488268.1054212535, 570783.0961163802 4488120.178624606))))"})
            }else{
                let filstr = this.cql
                console.log(filstr)
                this.source.updateParams({CQL_FILTER:filstr})
            }
        },
        removeFilter(){
            this.source.updateParams({CQL_FILTER:null})
        }
    }
}
</script>
  <style>
    .map {
      height: 800px;
      width: 100%;
    }
  </style>
